<template>
    <div class="a">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in carousel" :key="item">
          <img class="scrollimg" :src="`http://localhost:3001/${item.imgPath}`" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { carouselApi } from "../api/goods";
  
  let carousel = ref([]);
  onMounted(() => {
    getcarousel();
  });
  const getcarousel = async () => {
    let data = await carouselApi();
    carousel.value = data.carousel;
  };
  </script>
  
  <style lang="less" scoped>
 .scrollimg{
  width: 100%;
  height: 500px;
  border-radius: 25px;

 }
 .a{
  width: 60%;
  border-radius: 25px;
 }
  </style>